プロジェクトにpackage.jsonが置かれてる所から始めます。無い場合はyarn init -yで作りましょう。
JavaScript で始める場合必須モジュールは以下の5つです。
以下でインストールします。
yarn add -DE @storybook/react @babel/core babel-loader && \
yarn add -E react react-dom
次に設定ファイルで「どのファイルを Story 対象にするか」を指定します。設定ファイルはデフォルトで.storybook/main.jsになります。src/以下にある全ての.stories.js（この設定は.stories.tsも行ける）を対象にする場合以下のように設定します。
module.exports = {
stories: ['../src/**/*.stories.[tj]s']
};
最初..で1つ戻っているのは設定ファイルから見てだからです。では早速その.stories.jsファイルを作成しましょう。
ここではbutton.stories.jsを以下のようになるように作りました。
.
├── .storybook
│ └── main.js
└── src
└── components
└── button
└── button.stories.js
button.stories.jsの中身は、
import React from 'react';
import {Button} from '@storybook/react/demo';
export default {title: 'Button'};
export const withText = () => ;
export const withEmoji = () => (
);
にします。
defaultではこのファイルで作った各 Story を Button というグループ名でエクスポートしてます。それ以外にエクスポートしているものが Story でただの JSX で書いてます。
準備は整ったのであとはサーバーを建てて見てみましょう。binを直接でもいいですがここではrun-scriptを追加して、そのコマンドから建てることにします。
以下のコマンドを叩くとyarn storybookでサーバーを建てれます。npeは CLI で簡単にpackage.jsonを編集したり取得できる優れた CLI ツールです。
npx npe scripts.storybook start-storybook
では以下を叩くと、
yarn storybook
ランダムなポートでサーバーが立ち上がります。
╭─────────────────────────────────────────────────────╮
│ │
│ Storybook 5.3.3 started │
│ 18 s for manager and 17 s for preview │
│ │
│ Local: http://localhost:52871/ │
│ On your network: http://192.168.1.153:52871/ │
│ │
╰─────────────────────────────────────────────────────╯
この場合だとhttp://localhost:52871/が見れる URL です。アクセスしてみてButtonの各 Story が見れるか確認しましょう。
上記の内容と同じことをしたリポジトリを置いておきます。
